<template>
  <MkPanel title="血袋信息">
    <el-descriptions :column="3" border>
      <el-descriptions-item label="献血码"> {{ xueYe.xianXueMa }} </el-descriptions-item>
      <el-descriptions-item label="产品码"> {{ xueYe.chanPinId }} </el-descriptions-item>
      <el-descriptions-item label="名称"> {{ xueYe.mingCheng }} </el-descriptions-item>
      <el-descriptions-item label="血型">
        <span v-if="xueYe.rhD == '-'" style="">
          <span class="hollow-text"> {{ xueYe.abo }} </span>
          <span class="rhd-yingxing"> Rh(D)阴性 </span>
        </span>
        <span v-else>
          <span style="font-size: 20px;"> {{ xueYe.abo }} </span>
          &nbsp; Rh(D) {{ xueYe.rhD }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item label="规格"> {{ xueYe.rongLiang }}{{ xueYe.danWei }} </el-descriptions-item>
      <el-descriptions-item label="库存状态"> {{ xueYe.kuCunZhuangTai }} </el-descriptions-item>
      <el-descriptions-item label="血液品种"> {{ getXueYePinZhongMingCheng(xueYe.pinZhongId) }} </el-descriptions-item>
      <el-descriptions-item label="血液大类"> {{ xueYe.daLei }} </el-descriptions-item>
      <el-descriptions-item label="自编号"> {{ xueYe.ziBianHao }} </el-descriptions-item>
      <el-descriptions-item label="失效时间"> {{ xueYe.shiXiaoShiJian }} </el-descriptions-item>
      <el-descriptions-item label="采血时间"> {{ xueYe.caiXueShiJian }} </el-descriptions-item>
      <el-descriptions-item label="入库时间"> {{ xueYe.ruKuShiJian }} </el-descriptions-item>
      <el-descriptions-item label="血液来源"> {{ laiYuan }} </el-descriptions-item>
      <el-descriptions-item label="所属院区"> {{ getOrgName(xueYe.yuanQuId) }} </el-descriptions-item>
      <el-descriptions-item label="回收状态"> {{ xueYe.huiShouZhuangTai }} </el-descriptions-item>
      <el-descriptions-item label="库存Id"> {{ xueYe.id }} </el-descriptions-item>
      <el-descriptions-item label="血袋外观"> {{ xueYe.xueDaiWaiGuan }} </el-descriptions-item>
    </el-descriptions>
  </MkPanel>
  <MkPanel title="血袋闭环" style="display: flex; flex-direction:row">
    <el-timeline style="width: 300px">
      <el-timeline-item v-for="(activity, index) in tableData" :key="index" icon=""
        :type="activity.mingCheng == '新增' ? 'primary' : 'info'" color="" size="large" :hollow="true"
        :timestamp="activity.caoZuoShiJian">
        {{ activity.mingCheng }}
      </el-timeline-item>
    </el-timeline>
    <MkTable :data="tableData" v-loading="loading">
      <MkColumnIndex />
      <MkColumn prop="caoZuoShiJian" label="操作时间" width="150" />
      <MkColumn prop="kuCunId" label="库存Id" />
      <MkColumn prop="mingCheng" label="操作名称" />
      <MkColumn prop="caoZuoHouZhuangTai" label="操作后状态" />
      <MkColumn prop="neiRong" label="操作信息" :col="2" />
      <MkColumn prop="caoZuoRen" label="操作人" />
    </MkTable>
  </MkPanel>
</template>

<script lang='ts' setup>
// 血液信息显示组件
import { InvKuCunApi, InvKuCunOutput, InvKuCunPageInput } from '/@/api/inv/InvKuCun';
import { OptXueYeApi, OptXueYePageInput, OptXueYeOutput } from '/@/api/opt/OptXueYe';
import { getXueYePinZhongMingCheng, getOrgName } from '/@/stores/baseInfo';
import { usePageQuery, useBasEntity } from '/@/hooks'

const props = defineProps({
  xueYe: {
    default: { xianXueMa: '-------------------', chanPinId: '------------', mingCheng: '---------------' } as InvKuCunOutput,
  },
})

const { searchParam, total, tableData, loading, search } = usePageQuery<OptXueYeOutput, OptXueYePageInput>(OptXueYeApi.page)
searchParam.pageSize = 999

const { mingCheng: laiYuan } = useBasEntity("BasXueYeLaiYuan", () => props.xueYe.laiYuanId)

watch(() => props.xueYe, async (newVal, oldVal) => {
  searchParam.kuCunId = props.xueYe.id;
  search();
})

</script>

<style lang='scss' scoped>
.hollow-text {
  font-size: 22px;
  font-weight: bold;
  color: white;
  padding-right: 5px;
  /* 以下是创建镂空效果的边框样式 */
  -webkit-text-stroke: 2px black;
  /* 为文本添加黑色边框 */
  text-stroke: 21px black;
}

.rhd-yingxing {
  font-size: 20px;
  color: white;
  background-color: black;
}
</style>
